<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="01/01/2009">
<meta name="revisit-after" content="15 days">
<title>Snap Links Plus Test Page</title>
<link rel="stylesheet" type="text/css" href="my.css">
	<style>
		#JS_Click_Events_Tester IMG 				{ border: 2px solid transparent; cursor: pointer; }
		#JS_Click_Events_Tester SPAN 				{ padding: 0px 2px; border: 2px solid transparent; cursor: pointer; }
		#JS_Click_Events_Tester DIV 				{ padding: 0px 2px; border: 2px solid transparent; cursor: pointer; }
		#JS_Click_Events_Tester IMG.highlighted 	{ padding: 2px; }
		#JS_Click_Events_Tester .highlighted { border: 2px solid black !important; }

		DIV.Issues { margin-left: 25px; }
		DIV.Issues DIV { font-weight: bold; margin-bottom: 15px;}
		DIV.Issues A { font-weight: normal; }
		A { color: blue; }
	</style>
</head>
<body>
<h1>Snap Links Plus Test Page</h1>
<h2>Previous Problem Sites for Testing:</h2>
<DIV class="Issues">
	<div>
		This websites body.scrollHeight is not correct<br>
		<a href="http://www.iltalehti.fi/" target="_blank">http://www.iltalehti.fi/</a><br>
		Fixed by <a href="http://code.google.com/p/snaplinksplus/source/detail?r=4dc264a0c378d27a931689a1dbba12c2f0e16916">4dc264a0c378</a><br>
	</div>
	<div>
		This websites documentElement.scrollHeight is not correct<br>
		<a href="http://www.idarionis.com:9500" target="_blank">http://www.idarionis.com:9500</a><br>
		Broken by <a href="http://code.google.com/p/snaplinksplus/source/detail?r=4dc264a0c378d27a931689a1dbba12c2f0e16916">4dc264a0c378</a><br>
		<a href="http://code.google.com/p/snaplinksplus/issues/detail?id=31">Issue 31</a> Fixed by <a href="http://code.google.com/p/snaplinksplus/source/detail?r=593d646f7ee60b2d696b19e35545b604456103b1">593d646f7ee6</a><br>
	</div>
	<div>
		This websites has a scrollable element within it's page<br>
		<a href="https://groups.google.com/forum/#!msg/snaplinksplus/7a18LX7n6uM/5A39Mdlx5RQJ">https://groups.google.com/forum/#!msg/snaplinksplus/7a18LX7n6uM/5A39Mdlx5RQJ</a><br>
		<a href="http://code.google.com/p/snaplinksplus/issues/detail?id=30">Issue 30</a> Not Yet Fixed
	</div>
	<div>
		Hover over an image for popover, drag over larger image, large image link and underlying (hidden) image links are both chosen<br>
		<a href="http://images.google.com/search?num=10&hl=en&site=&tbm=isch&source=hp&biw=1600&bih=1089&q=gold&oq=gold&gs_l=img.3..0l10.536.854.0.973.4.4.0.0.0.0.107.313.3j1.4.0...0.0...1ac.1.wdGShMYujzA#q=gold&hl=en&sa=X&tbas=0&tbm=isch&tbas=0&ei=EwiXUJjfM5LzqwHA-oG4Dg&ved=0CBYQuAs&bav=on.2,or.r_gc.r_pw.r_qf.&fp=d96a74ebefcc27a8&bpcl=37189454&biw=1600&bih=1089">Google Images Search for Gold</a><br>
		<a href="http://code.google.com/p/snaplinksplus/issues/detail?id=37">Issue 37</a> Not Yet Fixed
	</div>
	<div>
		General Testing Sites<br>
		<a href="http://www.cnn.com/" target="_blank">http://www.cnn.com/</a><br>
		<a href="http://www.yahoo.com/" target="_blank">http://www.yahoo.com/</a>
	</div>
</div>

<h2>Links Within Text</h2>
	<p>
		This is a test file for testing the link rect detection and drawing code.
	</p>
	<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://en.wikipedia.org/wiki/Gold">Duis mollis dolor et ante tincidunt</a> accumsan vitae sed elit. Integer id arcu ipsum. Vestibulum molestie convallis eros et commodo. Vestibulum ut odio lectus, <a href="http://en.wikipedia.org/wiki/Gold">quis scelerisque lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</a> Nam tincidunt massa eu nibh interdum mattis. Sed porta augue tortor, et blandit justo. Integer ut enim nisl. Cras vel lacus neque, nec vulputate neque. Aenean volutpat ante et nibh facilisis dapibus. Nam at odio ac est pharetra egestas. Maecenas congue, risus vitae lacinia placerat, mauris velit fringilla elit, non iaculis augue ipsum non sem. Duis ornare vestibulum nibh porttitor consectetur.
	</p>
	<p>
Suspendisse nibh orci, sodales dapibus consectetur sit amet, venenatis id leo. <a href="http://en.wikipedia.org/wiki/Gold">Cras a magna posuere mi placerat hendrerit ac quis tellus. Proin ante nibh, dapibus ac porta ac, egestas at orci. Nulla dignissim lacinia dolor nec tempus. Nulla nec velit libero, non tincidunt neque. Integer suscipit vestibulum imperdiet. Fusce vel nibh eget erat consectetur auctor nec vel nisl. Morbi non massa augue. Nullam ac mi ac massa facilisis venenatis id vitae libero. Mauris vulputate, elit in interdum ultricies, eros diam varius nisl, vitae feugiat dolor massa non diam. Aliquam eros ante, convallis tristique dapibus in, aliquam eu sapien. Aliquam sollicitudin pellentesque elit, ut dapibus nibh semper adipiscing. Sed accumsan ligula quis quam posuere hendrerit</a>. Curabitur eleifend tempor elit, a ullamcorper tortor laoreet in. Curabitur et eros nisi, et volutpat dolor. In nec tortor libero, aliquam gravida diam. Duis non vehicula elit. Morbi non eros a libero varius scelerisque. Maecenas ac dui ligula. Nunc scelerisque nunc sed dui hendrerit vitae venenatis dui tempor.
	</p>
	<p>
<a href="http://en.wikipedia.org/wiki/Gold"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Ag-Au-Cu-colours-english.svg/220px-Ag-Au-Cu-colours-english.svg.png">Integer sodales, velit vel vulputate mattis</a>, orci ipsum volutpat erat, ut consequat enim est quis tellus. Proin fermentum libero vitae enim hendrerit eget dictum erat blandit. Etiam eget diam lorem. Vestibulum condimentum, lacus eget pretium dictum, enim elit vehicula urna, sit amet volutpat mi felis id leo. Cras porta rhoncus leo laoreet sodales. Cras lectus nunc, pretium quis suscipit vitae, eleifend in dolor. Nam hendrerit suscipit felis, ac fringilla dui hendrerit tristique. Fusce suscipit mi ante, ac vestibulum nunc. Suspendisse potenti. Vestibulum <a href="http://en.wikipedia.org/wiki/Gold">sollicitudin euismod mauris, ac fringilla nunc euismod ut. Vivamus est diam, consequat eget sagittis eget, consectetur et purus.</a> Morbi pulvinar urna id mauris lobortis sit amet pretium justo luctus. Donec at blandit orci. Nam at mauris ut erat dignissim euismod. Nam scelerisque mi nec purus lacinia sed porttitor urna auctor. Pellentesque ac est gravida enim tincidunt ultricies. Quisque erat sapien, gravida vitae molestie non, imperdiet eget quam.
	</p>
	<p>
<a href="http://en.wikipedia.org/wiki/Gold"><img style="float: left;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Ag-Au-Cu-colours-english.svg/220px-Ag-Au-Cu-colours-english.svg.png">Vestibulum rhoncus adipiscing rhoncus</a>. Quisque quis pharetra arcu. Morbi in metus vel leo dignissim vulputate sit amet eget lacus. Donec sed est id tellus mollis luctus. Donec porta sem sed orci eleifend euismod. Aliquam vulputate consequat nisl, <a href="http://en.wikipedia.org/wiki/Gold">et semper nibh consectetur in. Praesent eu dolor lacus, id porttitor tellus. Sed nec consequat orci. In hac habitasse platea dictumst. Maecenas semper malesuada orci, vestibulum cursus mi venenatis vel. Nunc vitae augue turpis. Etiam molestie tempus purus posuere vehicula. Nulla facilisi.</a> Donec fermentum porta iaculis. Nam tristique arcu nunc. Sed volutpat blandit orci vitae tempus. Phasellus non turpis sed mauris vehicula posuere quis nec dui.
	</p>
	<p>
<a href="http://en.wikipedia.org/wiki/Gold"><img style="float: right;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Ag-Au-Cu-colours-english.svg/220px-Ag-Au-Cu-colours-english.svg.png">Pellentesque</a> sit amet neque non tortor vehicula imperdiet vitae viverra velit. Morbi nunc arcu, dignissim quis ornare vel, mattis eget dui. Nulla urna massa, tincidunt sit amet auctor sit amet, dignissim et augue. Sed accumsan pharetra metus vel egestas. Phasellus semper elit nisl, at viverra dui. Donec faucibus tempus nibh, eu ullamcorper dolor varius et. Pellentesque venenatis odio a <a href="http://en.wikipedia.org/wiki/Gold">erat aliquam vehicula. Integer a odio sit amet lectus placerat blandit eget et quam. Aenean at</a> arcu nec urna pharetra eleifend non vel ligula. Ut velit ligula, cursus sit amet dapibus quis, consequat eu massa. Ut facilisis erat at magna sodales interdum. Cras sit amet eros sed elit convallis rutrum. Integer a ipsum vitae nibh auctor sagittis. Vestibulum sit amet turpis tortor, sit amet sagittis massa. Proin metus metus, elementum quis euismod id, tristique quis metus. Curabitur nisi arcu, ullamcorper eget facilisis non, blandit in odio. Quisque suscipit est sed dolor pretium vel semper orci adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
	</p>
<hr/>
<h2>Links with dangerous content (copy to clipboard sanitize)</h2>
<ul>
	<li><a href="http://en.wikipedia.org/wiki/Gold">This link title contains a < and > in it</a></li>
	<li><a href="&quot;&gt;http://<script src=&quot;//evil.com&quot;/&gt;">This link contains &lt;script&gt;</a></li>
</ul>
<div style="float: right;">
	<div onmouseover="document.getElementById('gold-hover-show').style.display='';" style="margin-right: 100px;">
		<span id="hover">Hover over me</span><br>
		<a debug="1" which="under" href="http://images.google.com/imgres?q=gold&hl=en&sa=X&tbas=0&biw=1600&bih=1089&tbm=isch&tbnid=C0c1mqQ_Yaj6SM:&imgrefurl=http://nowiknow.com/south-koreas-reverse-gold-rush/&docid=S26NQjiXVJmrIM&imgurl=http://nowiknow.com/wp-content/uploads/2012/08/01-gold-bar.jpeg&w=500&h=353&ei=HLCXUNvQIce62gXgi4C4Aw&zoom=1&iact=rc&dur=235&sig=114325496102460811924&page=1&tbnh=137&tbnw=194&start=0&ndsp=41&ved=1t:429,r:2,s:0,i:140&tx=102&ty=62">
			<img width="194" height="137" src="">
		</a>
	</div>
	<div id="gold-hover-show" style="display: none; position: relative; top: -175px; left: -50px;" onmouseout="this.style.display='';">
		<a debug="1" which="over" href="http://images.google.com/imgres?q=gold&hl=en&sa=X&tbas=0&biw=1600&bih=1089&tbm=isch&tbnid=C0c1mqQ_Yaj6SM:&imgrefurl=http://nowiknow.com/south-koreas-reverse-gold-rush/&docid=S26NQjiXVJmrIM&imgurl=http://nowiknow.com/wp-content/uploads/2012/08/01-gold-bar.jpeg&w=500&h=353&ei=HLCXUNvQIce62gXgi4C4Aw&zoom=1&iact=rc&dur=235&sig=114325496102460811924&page=1&tbnh=137&tbnw=194&start=0&ndsp=41&ved=1t:429,r:2,s:0,i:140&tx=102&ty=62">
			<img width="267" height="189" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ-s6qdzk5C2JInyvLKbNnzDN7oh97bxJnI8lXqWw8achzXwt4C">
		</a>
	</div>
</div>
<h2>Checkboxes &amp; Buttons</h2>
	<p>
		<input type="checkbox" value="0" checked> Non-Labeled Checkbox<br>
		<input type="button" value="Button For Clicking"><br>
		<label><input type="checkbox" value="0"> Labeled Checkbox (Enclosed)</label><br>
		<input type="checkbox" id="label-for-checkbox" value="0" checked> <label for="label-for-checkbox">Labeled Checkbox (for=id)</label><br>
		<input type="button" value="Button For Clicking"><br>
		<input type="checkbox" value="0" checked> Non-Labeled Checkbox #2<br>
	</p>
	<p>
		<input type="checkbox" value="0" checked> Non-Labeled Checkbox #3<br>
		<input type="button" value="Button For Clicking"><br>
		<label style="display: block;"><input type="checkbox" value="0"> Labeled Checkbox (Enclosed) #2</label>
		<input type="checkbox" value="0" id="label-for-checkbox2"  checked> <span>Spacer</span> <label for="label-for-checkbox2">Labeled Checkbox (for=id) #2</label><br>
	</p>
	<p>
		<input type="button" value="Button For Clicking">
		<input type="submit" value="Submit Button For Clicking">
	</p>
	<p>
		<span>
			<label><input type="radio" name="Radio1" value="Radio1">Radio 1</label>
			<label><input type="radio" name="Radio1" value="Radio2">Radio 2</label>
			<label><input type="radio" name="Radio1" value="Radio3">Radio 3</label>
		</span>
	</p>
	<p>
		<span>
			<label><input type="radio" name="Radio2" value="Radio1">Radio 1</label>
			<label><input type="radio" name="Radio2" value="Radio2">Radio 2</label>
			<label><input type="radio" name="Radio2" value="Radio3">Radio 3</label>
		</span>
	</p>
<script language="javascript">
	/* Converts an iterable element to an array */
	function $A(iterable) {
		if (!iterable) return [];
		if ('toArray' in Object(iterable)) return iterable.toArray();
		var length = iterable.length || 0, results = new Array(length);
		while (length--) results[length] = iterable[length];
		return results;
	}

	window.addEventListener('load', function() {
		$A(document.body.querySelectorAll('INPUT')).forEach( function(elem) {
			if(elem.getAttribute('type') == 'button' || elem.getAttribute('type') == 'submit' || elem.getAttribute('type') == 'checkbox') {
				elem.addEventListener('click', function(e) {
					if(this.OrigValue == undefined) {
						this.OrigValue = this.value;
						this.value = 'Clicked!';
						this.style.backgroundColor = '#00FF00';
						this.style.border = '1px solid blue';
						this.style.padding = '4px';
					}
					setTimeout( function() {
						this.value = this.OrigValue;
						delete this.OrigValue;
						this.style.backgroundColor = '';
						this.style.border = '';
					}.bind(this), 3000);
				}, false );
			}
		}, this );
	}, false );
</script>
<hr/>
<h2>JavaScript Links - Replace Location</h2>
	<table>
		<thead>
			<tr>
				<th colspan="3">Normal</th>
				<th colspan="3">JavaScript</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: large;">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: medium;">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: small;">Gold</a></td>
				<td><a href="javascript:load_page('Gold')" style="font-size: large;">Gold</a></td>
				<td><a href="javascript:load_page('Gold')" style="font-size: medium;">Gold</a></td>
				<td><a href="javascript:load_page('Gold')" style="font-size: small;">Gold</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Gold">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold">Gold</a></td>
				<td><a href="javascript:load_page('Gold')">Gold</a></td>
				<td><a href="javascript:load_page('Gold')">Gold</a></td>
				<td><a href="javascript:load_page('Gold')">Gold</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Silver">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver">Silver</a></td>
				<td><a href="javascript:load_page('Silver')">Silver</a></td>
				<td><a href="javascript:load_page('Silver')">Silver</a></td>
				<td><a href="javascript:load_page('Silver')">Silver</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Bronze">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze">Bronze</a></td>
				<td><a href="javascript:load_page('Bronze')">Bronze</a></td>
				<td><a href="javascript:load_page('Bronze')">Bronze</a></td>
				<td><a href="javascript:load_page('Bronze')">Bronze</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: small;">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: small;">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: small;">Bronze</a></td>
				<td><a href="javascript:load_page('Bronze')" style="font-size: small;">Bronze</a></td>
				<td><a href="javascript:load_page('Bronze')" style="font-size: small;">Bronze</a></td>
				<td><a href="javascript:load_page('Bronze')" style="font-size: small;">Bronze</a></td>
			</tr>
		</tbody>
	</table>
<script language="javascript">
function load_page(page) { window.location.replace('http://en.wikipedia.org/wiki/'+ page); }
</script>
<hr/>
<h2>JavaScript Links - Popup Window</h2>
	<table>
		<thead>
			<tr>
				<th colspan="3">Normal</th>
				<th colspan="3">JavaScript</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Gold">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold">Gold</a></td>
				<td><a href="javascript:popup_page('Gold')">Gold</a></td>
				<td><a href="javascript:popup_page('Gold')">Gold</a></td>
				<td><a href="javascript:popup_page('Gold')">Gold</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Silver">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver">Silver</a></td>
				<td><a href="javascript:popup_page('Silver')">Silver</a></td>
				<td><a href="javascript:popup_page('Silver')">Silver</a></td>
				<td><a href="javascript:popup_page('Silver')">Silver</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Bronze">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze">Bronze</a></td>
				<td><a href="javascript:popup_page('Bronze')">Bronze</a></td>
				<td><a href="javascript:popup_page('Bronze')">Bronze</a></td>
				<td><a href="javascript:popup_page('Bronze')">Bronze</a></td>
			</tr>
		</tbody>
	</table>
<script language="javascript">
function popup_page(page) { window.open('http://en.wikipedia.org/wiki/'+ page); }
</script>
<hr/>
<h2>Normal Links Table</h2>
	<table>
		<tbody>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: large;">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: medium;">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: small;">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: large;">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: medium;">Gold</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Gold" style="font-size: small;">Gold</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Silver" style="font-size: large;">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver" style="font-size: medium;">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver" style="font-size: small;">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver" style="font-size: large;">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver" style="font-size: medium;">Silver</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Silver" style="font-size: small;">Silver</a></td>
			</tr>
			<tr>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: large;">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: medium;">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: small;">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: large;">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: medium;">Bronze</a></td>
				<td><a href="http://en.wikipedia.org/wiki/Bronze" style="font-size: small;">Bronze</a></td>
			</tr>
		</tbody>
	</table>
<hr/>
<h2>Javascript Elements with click handlers (targeted for .click() because they have cursor: pointer</h2>
<table id="JS_Click_Events_Tester" cellspacing="6">
	<tr><th></th>			<TH>IMG</TH>	<TH>SPAN</TH>	<TH>DIV</TH></tr>
	<tr>						<th>"onclick"</th>				<td><img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/22px-Flag_of_the_United_States.svg.png" onclick="this.classList.toggle('highlighted')"></td>
																<td><span onclick="this.classList.toggle('highlighted')">span</span></td>
																<td><div onclick="this.classList.toggle('highlighted')">div</div></td></tr>
	<tr id="onclick-via-js">	<th>.onclick</th>				<td><img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/22px-Flag_of_the_United_States.svg.png"></td>
																<td><span>span</span></td>
																<td><div>div</div></td></tr>
	<tr id="click_via_addEvent">		<th>.addEventListener</th>		<td><img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/22px-Flag_of_the_United_States.svg.png"></td>
																<td><span>span</span></td>
																<td><div>div</div></td></tr>
</table>
<script language="javascript">
	var elem = document.getElementById('onclick-via-js');
	Array.prototype.forEach.call(elem.querySelectorAll('td > *'), function(elem) {
		elem.onclick = function() this.classList.toggle('highlighted');
	});

	var elem = document.getElementById('click_via_addEvent');
	Array.prototype.forEach.call(elem.querySelectorAll('td > *'), function(elem) {
		elem.addEventListener('click', function() this.classList.toggle('highlighted'));
	});

</script>
<h2>IFRAME</h2>
<div id="mouseBox" style="float:left; width:30%; height:300px; border:1px solid black;">
</div>
<script defer="defer" type="text/javascript">
document.addEventListener('mousemove', function(e) {
	var mouseBox = document.getElementById('mouseBox');
	mouseBox.innerHTML = '<table>'+
		'<tr><th>e.clientX</th><td>'+ e.clientX +'</td></tr>'+
		'<tr><th>e.clientY</th><td>'+ e.clientY +'</td></tr>'+
		'<tr><th>e.pageX</th><td>'+ e.pageX +'</td></tr>'+
		'<tr><th>e.pageY</th><td>'+ e.pageY +'</td></tr>'+
		'<tr><th>window.scrollX</th><td>'+ window.scrollX +'</td></tr>'+
		'<tr><th>window.scrollY</th><td>'+ window.scrollY +'</td></tr>'+
		'<tr><th>window.scrollMaxX</th><td>'+ window.scrollMaxX +'</td></tr>'+
		'<tr><th>window.scrollMaxY</th><td>'+ window.scrollMaxY +'</td></tr>'+
		'</table>';
}, true);
</script>
<div>
	<iframe src="iframe_content.htm" style="float:right; width:69%; height:300px; border:1px solid #000000; margin-bottom:50px;">
</div>
</body>
</html>
